<template>
    <el-container style="width:1100px">
        <el-header>
            <el-card shadow="always" style="font-size:16px">我的会员</el-card>
        </el-header>
        <el-main>
            <el-card shadow="always" class="always">
                <div class="topBox">
                    <div class="top">

                        <div class="avatar">
                            <el-avatar :size="100">
                                <el-icon :size="100">
                                    <UserFilled />
                                </el-icon>
                            </el-avatar>

                            <div class="infoImg">
                                <div>1889670_ce1D</div>
                                <div>您还不是会员</div>
                            </div>
                        </div>

                    </div>

                    <div style="margin-top:20px;margin-left: 35%;">开通会员平均每年可省：￥9500</div>

                    <div class="xia">
                        <div class="buy">
                            <div class="buyMember">
                                <span>季度会员</span>
                                <span>￥<i>98</i>/季</span>
                                <span>合计￥98(青少年专属)</span>
                            </div>

                            <div class="buyMember">
                                <span>一年会员</span>
                                <span>￥<i>268</i>/年</span>
                                <span>合计￥268</span>
                            </div>


                            <div class="buyMember active ">
                                <div class="btn">
                                    <span>推荐</span>
                                </div>
                                <span>三年会员</span>
                                <span>￥<i>196</i>/年</span>
                                <span>合计￥588(省￥216)</span>
                            </div>
                        </div>

                        <el-button class="open">立即以588元开通</el-button>

                        <div class="text">开通即视为同意
                            <a href="https://www.dance365.com/vip-agreement" target="_blank">《会员服务协议》</a>
                        </div>
                    </div>
                </div>

                <div class="buttonBox">
                    <h3>会员专属权益</h3>

                    <ul class="pic">
                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/teach_video_free.png" alt=""></span>
                            <div>
                                <p>713个会员专区</p>
                                <p>课程免费学习</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/member_preferential.png" alt=""></span>
                            <div>
                                <p>非会员专区课程</p>
                                <p>可获会员立减优惠</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/member_screen@2x.png" alt=""></span>
                            <div>
                                <p>同屏对比</p>
                                <p>功能</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/update_music@3x.png" alt=""></span>
                            <div>
                                <p>音频提取</p>
                                <p>功能</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/music_clip@3x.png" alt=""></span>
                            <div>
                                <p>音频剪辑</p>
                                <p>功能</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/member_icon_beat.png" alt=""></span>
                            <div>
                                <p>节拍口令</p>
                                <p>功能</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/member_photo_download1@3x.png" alt=""></span>
                            <div>
                                <p>保存视频到</p>
                                <p>手机本地相册</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/lv_ad@3x.png" alt=""></span>
                            <div>
                                <p>免广告特权</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/lv_accelerate.png" alt=""></span>
                            <div>
                                <p>成长等级</p>
                                <p>加速特权</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/course_equity.png" alt=""></span>
                            <div>
                                <p>会员学习</p>
                                <p>成长优先帮扶</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/member_logo.png" alt=""></span>
                            <div>
                                <p>会员专享</p>
                                <p>身份标识</p>
                            </div>
                        </li>

                        <li class="picItem">
                            <span><img src="https://rs.dance365.com/update_equity.png" alt=""></span>
                            <div>
                                <p>享受新增</p>
                                <p>权益和功能</p>
                            </div>
                        </li>
                    </ul>
                </div>

            </el-card>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { UserFilled } from "@element-plus/icons-vue"
</script>

<style scoped lang="less">
a {
    text-decoration: none;
    color: #f93684;
}

.always {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top {
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.infoImg {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
}

.infoImg :first-child {
    font-size: 20px;

}

.infoImg :nth-child(2) {
    font-size: 14px;
    color: deeppink;
    margin-top: 14px;

}

.buyMember {
    display: flex;
    flex-direction: column;
    border: 1px solid #b1b5c1;
    border-radius: 10px;
    text-align: center;
    margin-right: 30px;
    width: 220px;
    height: 124px;
    justify-content: space-around;
    box-sizing: border-box;
    color: black;
    position: relative;

    i {
        font-size: 25px;
    }

    .btn {
        position: absolute;
        top: -20px;
        right: -25px;
    }
}

.btn span {
    display: inline-block;
    width: 70px;
    height: 30px;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(-56deg, #ff638f, #ff4683);
    border-radius: 20px;
    padding-top: 10px;
}



.buy {
    display: flex;
    margin-top: 50px;

    .active {
        border: 2px solid #f93684;
        background-color: #f9ebf1;
        color: #f93684;
    }

}

.open {
    width: 330px;
    height: 56px;
    font-size: 16px;
    margin: 30px auto 12px;
    border-radius: 10px;
    background: linear-gradient(-56deg, #ff4683, #ff638f);
    color: #fff;
    cursor: pointer;
    margin: 30px 178px;
}

.text {
    font-size: 14px;
    margin-left: 245px
}

.topBox {
    border-bottom: 1px solid #e3e3e3;
    width: 1020px;
    padding-bottom: 30px;
}

.xia {
    margin-left: 12%;
}


.buttonBox {
    h3 {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .pic {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        position: relative;
        padding-left: 19px;
        justify-content: space-between;

        .picItem {
            div {
                margin: 1em 0;
            }
        }
    }

    .pic li {
        margin-bottom: 30px;
        margin-right: 30px;
        line-height: 20px;
        width: 129px;
        height: 129px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        text-align: center;
        padding: 14px 0 0;
        font-size: 14px;


        img {
            width: 46px;
            height: 42px;
        }
    }
}
</style>
